<template>
	<div id="container" style="display: flex;">
		<div>
			<el-select v-model="psRole.id" placeholder="请选择" @change="xuan()">
				<el-option v-for="item in roleList" :key="item.id" :label="item.rolename" :value="item.id">
				</el-option>
			</el-select>
			<h4 style="margin: 30px 0 30px 0">系统功能菜单树</h4>
			<!-- :default-expanded-keys默认展开的节点的 key 的数组 -->
			<!-- default-checked-keys	默认勾选的节点的 key 的数组 -->
			<el-tree :data="funcationData" show-checkbox node-key="id" :default-expanded-keys="allKeys"
				:default-checked-keys="nums" :props="defaultProps" @check="dian">
			</el-tree>
			<div style="padding: 30px;">
				<el-button type="primary" @click="save()">保存配置</el-button>
			</div>
			<div style="padding: 10px 30px 30px 30px;">
				<i class="el-icon-circle-plus"></i><span>添加一级菜单</span>
			</div>
		</div>
		<div>

		</div>
	</div>

</template>

<script>
	import {
		queryByRoleTwo,
		queryByFuncationTwo,
		getFunctionById,
		addprem
	} from '@/config/request'
	export default {
		data() {
			return {
				psRole: {
					id: '',
					rolename: '',
					creationtime: '',
					createdby: '',
					lastupdatetime: '',
					isstart: '',
					pageNum: '1',
					str: ''
				},
				roleList: [],
				defaultProps: {
					children: 'psFunction',
					label: 'functionname'
				},
				funcationData: [],
				nums: [],
				allKeys: [],
				premissionList: [],
				prem: {
					prems: [],
					roleId: '',
					createdby: ''
				},
				psUser: {}
			}
		},
		methods: {
			load() {
				queryByRoleTwo().then(json => {
					this.roleList = json.data.psRoleList;
				})
				queryByFuncationTwo().then(json => {
					this.funcationData = json.data.functionList;
					this.funcationData.forEach(node => {
						this.allKeys.push(node.id); // Assuming 'id' is the key for each node
						if (node.children) {
							this.getAllKeys(node.children);
						}
					})
				})
			},
			xuan() {
				this.nums = []
				getFunctionById(this.psRole).then(json => {
					json.data.functionById.forEach(function(functions) {
						this.nums.push(functions.id);
					}, this);
					this.load()
				})
			},
			save() {
				this.prem.prems = this.nums;
				this.prem.roleId = this.psRole.id;
				this.psUser = JSON.parse(sessionStorage.getItem('psUser'));
				this.prem.createdby = this.psUser.usercode;
				console.log(JSON.stringify(this.prem))
				addprem(this.prem).then(json => {

				})
			},
			dian(node, oldNode) {
				this.nums = oldNode.checkedKeys;
			}
		},
		mounted() {
			this.load();
		}
	}
</script>

<style>
	#container {
		padding: 30px;
	}
</style>